<template>
    <div>
        <slot name="test" text="hello parent"></slot>
        <input type="file" ref="fileBox">
        <button @click="trigger">改变syncTest的值同步到父组件</button>
        <button @click="tiggerCustomEvent">触发自定义事件</button>
        <button @click="fakeCustomEventHandler" ref="fakeButton">fake button</button>
    </div>
</template>

<script>
    import chalk from 'chalk';
    let eventInstance = null

    export default {
        name: "child",
        data() {
            return {}
        },
        props: {
            syncTest: {
                type: String,
                default: ''
            }
        },
        methods: {
            trigger() {
                this.$emit('update:syncTest', 'changed!!!')
            },
            fakeCustomEventHandler() {
                const file = this.$refs['fileBox'].files[0]
                if(!file) {
                    alert('file not exist')
                    return
                }

                const fileUrlFromObject = URL.createObjectURL(file)
                const a = document.createElement('a')
                const event = document.createEvent('MouseEvent')
                event.initEvent('click', false, false)
                console.log(event)
                a.href = fileUrlFromObject
                a.download = file.name
                a.innerText = '下载'
                a.dispatchEvent(event)
            },
            tiggerCustomEvent() {
                const event = new Event('click')
                this.$refs['fakeButton'].dispatchEvent(event)
            }
        },
        created() {
            eventInstance = new EventTarget()
            eventInstance.addEventListener('myEvent', function myEvent(params) {
                console.log(params)
            })

            console.log(chalk.blue('Hello world!'))

        }
    }
</script>

<style scoped>

</style>
